/**
 * 移动弹窗[用于拖动绝对定位的元素]
 * @param eventDown 鼠标按下事件对象
 * @param selector 弹窗选择器
 * @param restrictionType 限制类型：'none'(无限制)/'full'(限制整个弹窗)/'drag-point'(限制拖动点，默认)
 */
export const movePanel = (eventDown, selector, restrictionType = 'drag-point') => {
    eventDown.preventDefault();
    const disX = eventDown.layerX;
    const disY = eventDown.layerY;

    const panel = document.querySelector(selector);
    // 获取弹窗的宽高
    const panelWidth = panel.offsetWidth;
    const panelHeight = panel.offsetHeight;

    document.onmousemove = (eventMove) => {
        moveOption(eventMove);
    };

    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    };

    const moveOption = (eventMove) => {
        // 获取浏览器可视区域尺寸
        const clientWidth = document.documentElement.clientWidth;
        const clientHeight = document.documentElement.clientHeight;

        // 计算无边界限制时的位置
        let left = eventMove.clientX - disX;
        let top = eventMove.clientY - disY;

        // 根据限制类型应用不同的边界检查
        switch (restrictionType) {
            case 'full': // 限制整个弹窗在屏幕内
                left = Math.max(0, Math.min(left, clientWidth - panelWidth));
                top = Math.max(0, Math.min(top, clientHeight - panelHeight));
                break;

            case 'drag-point': // 限制拖动点在屏幕内（默认）
                // 计算拖动点（鼠标按下的位置）的屏幕坐标
                const dragPointX = left + disX;
                const dragPointY = top + disY;

                // 确保拖动点不超出屏幕边界
                if (dragPointX < 0) left = -disX;
                if (dragPointY < 0) top = -disY;
                if (dragPointX > clientWidth) left = clientWidth - disX;
                if (dragPointY > clientHeight) top = clientHeight - disY;
                break;

            case 'none': // 无限制
            default:
                // 不需要边界检查
                break;
        }

        // 应用位置
        panel.style.top = top + 'px';
        panel.style.left = left + 'px';
    }
}
/**
 * 移动弹窗[用于拖动相对定位的元素]
 * @param eventDown
 * @param selector
 */
export const moveRelate = (eventDown, selector) => {
    eventDown.preventDefault()
    let disX = eventDown.pageX;
    let disY = eventDown.pageY;
    let startX = parseInt(document.querySelector(selector).style.left || '0')
    let startY = parseInt(document.querySelector(selector).style.top || '0')
    document.onmousemove = (eventMove) => {
        moveOption(eventMove)
    };
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    };
    const moveOption = (eventMove) => {
        let left = eventMove.pageX - disX;
        let top = eventMove.pageY - disY;
        document.querySelector(selector).style.top = top + startY + 'px'
        document.querySelector(selector).style.left = left + startX+ 'px'
    }
}

/**
 * 计算文本宽度
 * @param str
 * @param fontSize
 * @return {number}
 */
export function getTextWidth(str, fontSize = '14px') {
    let result;
    let ele = document.createElement('span')
    ele.innerText = str;
    ele.style.fontSize = fontSize;
    document.documentElement.append(ele);
    result = ele.offsetWidth;
    document.documentElement.removeChild(ele);
    return result;
}

/**
 * 计算图片真实尺寸
 * @param url
 * @return {Promise<unknown>}
 */
function getImageSizeByUrl(url) {
    return new Promise(function (resolve, reject) {
        let image = new Image();
        image.onload = function () {
            resolve({
                width: image.width,
                height: image.height
            });
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}

export default {
    movePanel, moveRelate, getTextWidth, getImageSizeByUrl
}
